// 标题
.title {
  position: relative;
  text-align: center;
  font-size: 32rpx;
  margin-bottom: 40rpx;

  &--bd {
    height: 70rpx;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2rpx;
      background-color: var(--color-primary);
    }

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 50%;
      height: 6rpx;
      transform: translateX(-50%);
      background-color: var(--color-primary);
    }
  }
}

// 横向滚动列表
.scroll-x {
  white-space: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory; // 滚动完毕后，让子元素拥有一个停靠的边界（强制停靠）

  &__item {
    display: inline-block;
    scroll-snap-align: center; // 父元素滚动完毕后，子元素停靠在左侧

    &:not(:last-child) {
      margin-right: 30rpx;
    }
  }
}

// 数据列表
.list {
  &--border {
    .list__item {
      &:not(:last-child) {
        @extend .bd-bottom;
      }
    }
  }

  // 底部边距列表
  &--mb-10 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-10;
      }
    }
  }

  &--mb-15 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-15;
      }
    }
  }
}

// 圆点
.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: var(--color-primary);
}
